<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="startmove.js"></script>
<style>
		*{padding: 0; margin: 0; list-style: none;}
		#div1{ position: relative; overflow: hidden; float: left; width: 680px; height: 347px; margin: 20px 50px;}
		#div1 ul{ position: absolute; left: 0px;  height: 347px;}
		#div1 ul li{ float: left;}
		a{ width: 10px; height: 10px; border-radius: 50%; display: block; float: left; position: relative; top: 320px;  left: 500px;  background: white; margin-right: 5px; }
		.active{ background: #333;}
</style>
<script>
	window.onload=function(){
		var Odiv=document.getElementById('div1');
		var oUl=Odiv.getElementsByTagName('ul')[0];
		var oLi=oUl.getElementsByTagName('li');
		var A=Odiv.getElementsByTagName('a');

		var oBtnL=document.getElementById('BtnL');
		var oBtnR=document.getElementById('BtnR');
		
		var now=0;
		var now2=0;
		
		for(var i=0; i<A.length;i++){
			oUl.style.width=oLi.length*oLi[0].offsetWidth+'px';
			A[i].index=i;
			A[i].onclick=function(){
				for(var i=0; i<A.length;i++){
					A[i].className='';
				}
				this.className='active';
				startMove(oUl,{left:-this.index*oLi[0].offsetWidth});
			};
		}

	


	oBtnL.onclick=function(){
		if(now==0){
			oLi[2].style.position='relative';
			oLi[2].style.left=-(oLi.length*oLi[0].offsetWidth)+'px';
			now=oLi.length-1;
		}else{
			now--;
		}
		now2--;
		toRun();
	};

	oBtnR.onclick=function(){
		if(now==oLi.length-1){
			oLi[0].style.position='relative';
			oLi[0].style.left=oLi.length*oLi[0].offsetWidth+'px';
			now=0;
		}else{
			now++;
		}

		now2++;
		toRun();
	};

function toRun(){

			for(var i=0; i<A.length;i++){
					A[i].className='';
			}
			A[now].className='active';
			startMove(oUl,{left:-now2*oLi[0].offsetWidth},function(){
				if(now==oLi.length-1){
				oLi[2].style.position='';
				oUl.style.left=oLi.length-2*oLi[0].offsetWidth+'px';
				now2=oLi.length-1;
				}else if(now==0){
					oLi[0].style.position='';
					oUl.style.left=0+'px';
					now2=0;
				}
			});
	}


}
	

</script>
</head>
<body>
		<div id="div1">
				<ul>
					<li><img src="1.jpg"></li>
					<li><img src="2.jpg"></li>
					<li><img src="3.jpg"></li>
				</ul>
				<a href="javascript:;" class="active"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
		</div>
		<input type="button" value="左" id="BtnL">
		<input type="button" value="右" id="BtnR">
</body>
</html>

